<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>less-demo</title>
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
    <link rel='stylesheet' href='https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
    <link rel="stylesheet/less" href="./index.less">
</head>

<body>
    <header class="navbar navbar-default navbar-fixed-top" id="banner">
        <div class="container">
            <a class="scrollable" href="#top"><img src="http://ol1rnobmr.bkt.clouddn.com/1488176867_611711.png" alt="西安小哥 | 前端工程师" title="西安小哥 | vue、webpack、less、es6" /></a>
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
            <nav class="collapse navbar-collapse" id="navbar" role="navigation">
                <ul class="nav navbar-nav navbar-right">
                    <li><a class="scrollable" href="#top">About</a></li>
                    <li><a class="scrollable" href="#portfolio">Portfolio</a></li>
                    <li><a class="scrollable" href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <a id="top" name="home"></a>
    <main>
        <header>
            <div class="intro-text">
                <p style="text-align:right">thinking、doing、do better、do much better<br>than today。exchange 、sharing、improve as quickly as possible。</p>
                <hr class="star-bright" /><span class="skills">前端工程师(Web Developer)</span>
            </div><img src="http://ol1rnobmr.bkt.clouddn.com/headimage.png" alt="欢迎一起学习交流（github账号:holidaying）" title="欢迎一起学习交流." />
        </header>
        <section id="portfolio">
            <h2>Portfolio</h2>
            <hr class="star-dark" />
            <ul class="grid">
                <li><img src="http://ol1rnobmr.bkt.clouddn.com/qq.png" alt="摇电视业务，曾经辉煌过" /></li>
                <li><img src="http://ol1rnobmr.bkt.clouddn.com/3869942172-579894e648be7_articlex.png" alt="野狗平台，网络聊天室" /></li>
                <li><img src="http://ol1rnobmr.bkt.clouddn.com/segment.png" alt="涉猎与奉献" /></li>
                <li><img src="http://ol1rnobmr.bkt.clouddn.com/tech.png" alt="技术与钻研" /></li>
                <li><img src="http://ol1rnobmr.bkt.clouddn.com/csdn.png" alt="总结和分享" /></li>
                <li><img src="http://ol1rnobmr.bkt.clouddn.com/github.png" alt="自学和沉淀" /></li>
            </ul>
        </section>
        <section id="contact">
            <h2>About Me</h2>
            <hr class="star-dark" />
            <div>
                <form id="contactForm" novalidate="">
                    <div class="form-item">
                        <label for="“name”">姓名</label>
                        <input id="name" type="text" placeholder="西安小哥" required="" />
                    </div>
                    <div class="form-item">
                        <label for="“email”">邮箱</label>
                        <input id="email" type="email" placeholder="workliudan@163.com" required="" />
                    </div>
                    <div class="form-item">
                        <label for="“phone”">电话</label>
                        <input id="phone" type="tel" placeholder="150xxxx5004" required="" />
                    </div>
                    <div class="form-item">
                        <label for="“message”">描述</label>
                        <textarea id="message" rows="5" placeholder="描述" required=""></textarea>
                    </div>
                    <br/>
                    <!-- <button type="submit">Send</button> -->
                </form>
                <div>
                    <p>君不见黄河之水天上来，奔流到海不复回。</p>
                    <p>君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
                    <p>人生得意须尽欢，莫使金樽空对月。</p>
                    <p>天生我材必有用，千金散尽还复来。</p>
                    <p>烹羊宰牛且为乐，会须一饮三百杯。</p>
                    <p>岑夫子，丹丘生，将进酒，君莫停。</p>
                    <p>......</p>
                    <p>生命不止、折腾不息</p>
                </div>
            </div>
        </section>
        <div class="scroll-top"><a class="button scrollable" href="#top"><i class="fa fa-chevron-up"></i></a></div>
    </main>
    <footer>
        <div id="footer-above">
            <div>
                <h3>More About Me</h3>
                <p>Love<i class="fa fa-fw fa-gamepad"></i> and <i class="fa fa-fw fa-music"></i>
                    <br/>is me<a href="https://github.com/holidaying">西安小哥</a>.</p>
            </div>
            <div>
                <h3>Around the Web</h3>
                <ul>
                    <li><a class="button social" href="https://segmentfault.com/u/holidaying"><i class="fa fa-fw fa-paper-plane-o"></i></a></li>
                    <li><a class="button social" href="https://github.com/holidaying"><i class="fa fa-fw fa-github"></i></a></li>
                    <li><a class="button social" href="http://www.jianshu.com/u/98e9a5c58e66"><i class="fa fa-fw fa-quora"></i></a></li>
                    <li><a class="button social" href="https://www.freecodecamp.com/holidaying" title="My Flickr"><i class="fa fa-fw  fa-free-code-camp"></i></a></li>
                </ul>
            </div>
        </div>
        <div id="footer-below">西安小哥 ©
            <script>
            document.write(new Date().getFullYear())
            </script>. All Rights Reversed
        </div>
    </footer>
</body>
<script>
less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
};
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src="./less.js"></script>
<script src="./index.js"></script>

</html>
